<template>
	<view>
		<u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<u-toast ref="uToast" />
		<u-form :model="phoneForm" :rules="phoneRules" ref="phoneuForm">
			<u-form-item prop="phone" label-width="130" :border-bottom="false">
				<view class="box box-align-center logInput">
					<u-input placeholder="请输入手机号码" v-model="phoneForm.phone" style="width: 100%;"
						placeholder-style="font-size:20rpx;color:#a9a9a9" :custom-style="{'font-size': '20rpx'}" />
				</view>
			</u-form-item>
			<u-form-item prop="code" label-width="130" :border-bottom="false">
				<view class="box authCode logInput">
					<u-input placeholder="请输入验证码" v-model="phoneForm.code" type="number" style="width: 100%;"
						placeholder-style="font-size:20rpx;color:#a9a9a9" :custom-style="{'font-size': '20rpx'}">
					</u-input>
					<u-button slot="right" type="default" plain size="mini" @click="getCode" :hair-line="false"
						:custom-style="{'border': 'none','background-color': '#f2f1f1'}">{{codeTips}}</u-button>
				</view>
			</u-form-item>
		</u-form>
		<u-button class="enter" :custom-style="enter" shape="square" throttle-time="2000" @click="getcodeLogin">登录
		</u-button>
	</view>
</template>

<script>
	import {
		login,
		codeLogin,
		getLoginCode
	} from '@/api/login.js'
	import { mapMutations, mapActions, mapGetters } from 'vuex'
	
	export default {
		props: {
			identity: {
				type: String,
				default: ''
			},
			policy: {
				type: Boolean,
				default: true
			}
		},
		watch: {
			identity(val) {
				this.phoneForm.title = val
			}
		},
		data() {
			return {
				enter: {
					color: '#FFFFFF',
					'background-color': '#4880ff',
					'letter-spacing': '8rpx',
					'border-radius': '20rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'font-weight': '600',
					'margin-top': '30rpx'
				},
				phoneForm: {
					phone: '',
					code: '',
					title: '家长',
					type_id: 4
				},
				codeTips: '', //验证码倒计时
				phoneRules: {
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],
					title: [{
						required: true,
						message: '请选择身份',
						trigger: ['blur', 'change']
					}],
				},
				list: [{
					value: '2',
					label: '家长'
				}],
				show: false
			}
		},
		onReady() {
			this.$refs.phoneuForm.setRules(this.phoneRules);
		},
		created() {
			this.phoneForm.title = this.identity
		},
		methods: {
			...mapMutations(['LOGIN']),
			
			codeChange(text) {
				this.codeTips = text;
			},
			obtainSf() {
				this.$emit('obtainSf')
			},
			//验证码登录
			getcodeLogin() {
				if (!this.policy) return this.$refs.uToast.show({
					title: '请先阅读并勾选协议',
					icon: false,
					type: 'error',
				})
				this.$refs.phoneuForm.validate(valid => {
					if (valid) {
						codeLogin(this.phoneForm).then(res => {
							this.LOGIN(res.data)
							if (res.data.sn.length <= 0) {
								//跳转至绑定教程
								uni.navigateTo({
									url: '/pages_subpackage/addTablet/bindTutorial/index'
								})
							}else {
								this.$refs.uToast.show({
									title: '登录成功',
									icon: false,
									type: 'success',
									isTab: true,
									url: '/pages/my/index'
								})
							}
							
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						return false
					}
				});
			},
			// 获取验证码
			getCode() {
				if (this.phoneForm.phone) {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						getLoginCode({
							phone: this.phoneForm.phone
						}).then(res => {
							uni.hideLoading();
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(err => {
							this.$u.toast(err.msg);
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					this.$u.toast('请先填写手机号码');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.enter {
		background-color: #60adff;
		letter-spacing: 8rpx;
		border-radius: $uni-border-radius-lg;
		line-height: 80rpx;
		overflow: hidden;
		color: #FFFFFF;
		font-weight: 600;
	}

	.inpu_sty {
		position: relative;

		.identity_txt {
			position: absolute;
			font-size: 20rpx;
			right: 20rpx;
			color: #a9a9a9;
			top: 0;
		}
	}
</style>
